import React, { Component } from 'react'
import styles from './index.module.scss'
// 组件

// api

// 插件
import { Table } from 'antd'
import classNames from "classnames";
import ReactEcharts from 'echarts-for-react';


export default class CableSync extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showCreateTypes: false, // 显示创建账本弹窗
    }
  }
  // ===========================api======================

  componentDidMount() {
    
  }
  componentDidUpdate(prevProps, prevState) {}
  showOptions = () => {
    console.log('showOptions')
  }
  selectBook = e => {
    console.log('e.target', e.target)
    // this.props.setBookId()
  }
  clickCreateTypes = () => {
    // 3种新增类型
    this.setState({
      showCreateTypes: true
    })
  }
  createClick = () => {

  }
  render() {
    const {bookList} = this.props
    const { showCreateTypes} = this.state
    return (
      <div className={styles.bookManage}>
        <div className="mask" onClick={() => {this.props.close()}}></div>
        <div className="bookManage">
          <div className="toolbar">
            <span className="close" onClick={this.props.close}>
              &lt;-
            </span>
            <span className="title">多账本</span>
            <div className="rightBtns">
              <span className="refresh" title="刷新">
                刷新
              </span>
              <span
                className="addBook"
                title="新建账本"
                onClick={this.clickCreateTypes}
              >
                新建账本
              </span>
              <span className="addNew" title="操作">
                操作
              </span>
            </div>
          </div>
          <div className="content">
            <ul onClick={this.selectBook}>
              {bookList.map((item) => (
                <li key={item.id} className={item.initIs == 0 ? "active" : ""}>
                  {item.name}
                  <span className="moreOptions" onClick={this.showOptions}>
                    ...
                  </span>
                  {item.initIs == 0 && <span className="check">√</span>}
                </li>
              ))}
            </ul>
          </div>
          <div className="footer"></div>
        </div>
        {showCreateTypes && (
          <div
            className="mask"
            onClick={() => {
              this.setState({
                showCreateTypes: false,
              });
            }}
          ></div>
        )}
        {showCreateTypes && (
          <div className="createBook">
            <ul onClick={this.selectBook}>
              <li onClick={this.props.showCreate}>新建账本</li>
              <li>复制账本</li>
              <li>加入他人账本</li>
            </ul>
          </div>
        )}
      </div>
    );
  }
}
